<template>
  <ul class="left-menu">
    <template v-for="(item, index) in state.menus" :key="item.key">
      <li
        :class="`left-menu-li ${item.key === state.active && 'active'}`"
        @click="handleClickMenu(item.key)"
      >
        <Tooltip :content="item.name" placement="right">
          <Icon class="left-menu-icon" :type="item.icon" :size="index === 0 ? 28 : 24" />
        </Tooltip>
      </li>
      <Divider v-if="index === 0" class="divider-custom" />
    </template>
  </ul>

  <!-- 模板 -->
  <Templates :visible="state.active === state.menus[0].key" @handle-close="handleClose" />
  <!-- 相册 -->
  <AlbumList :visible="state.active === state.menus[1].key" @handle-close="handleClose" />
  <!-- 相框 -->
  <ImageBox :visible="state.active === state.menus[2].key" @handle-close="handleClose" />
</template>

<script name="leftcenter" setup lang="ts">
import useSelect from '@/hooks/select';
import AlbumList from '../AlbumList/index.vue';
import Templates from '../Templates/index.vue';
import ImageBox from '../ImageBox/index.vue';

const { fabric, canvasEditor } = useSelect();

const state = reactive({
  isDrawingLineMode: false,
  lineType: false,
  active: '',
  menus: [
    {
      key: 'template',
      name: '模板',
      icon: 'ios-albums',
    },
    {
      key: 'album',
      name: '相册',
      icon: 'md-images',
    },
    {
      key: 'image-box',
      name: '相框',
      icon: 'ios-image',
    },
    {
      key: 'images',
      name: '素材',
      icon: 'ios-leaf',
    },
    {
      key: 'text',
      name: '文字',
      icon: 'logo-tumblr',
    },
  ],
});

const handleClickMenu = (key) => {
  if (key === state.active) {
    return handleClose();
  }

  switch (key) {
    case 'album':
      state.active = key;
      break;
    case 'template':
      state.active = key;
      break;
    case 'image-box':
      state.active = key;
      break;
    case 'text':
      addText();
      break;
  }
};

// 默认属性
const defaultPosition = { shadow: '', fontFamily: 'arial' };

const addText = (event) => {
  cancelDraw();
  const text = new fabric.IText('宝贝印记', {
    ...defaultPosition,
    fontSize: 80,
    fill: '#000000FF',
  });

  canvasEditor.addBaseType(text, { center: true, event });
};

const handleClose = () => {
  state.active = '';
};

// 退出绘制状态
const cancelDraw = () => {
  if (!state.isDrawingLineMode) return;
  state.isDrawingLineMode = false;
  state.lineType = '';
  canvasEditor.setMode(false);
  endConflictTools();
  ensureObjectSelEvStatus(true, true);
};

const endConflictTools = () => {
  canvasEditor.discardPolygon();
  canvasEditor.endDraw();
  canvasEditor.endTextPathDraw();
};

const ensureObjectSelEvStatus = (evented, selectable) => {
  canvasEditor.canvas.forEachObject((obj) => {
    if (obj.id !== 'workspace') {
      obj.selectable = selectable;
      obj.evented = evented;
    }
  });
};
onDeactivated(() => {
  cancelDraw();
});
</script>

<style lang="less" scoped>
.left-menu {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  padding: 10px 6px;

  li {
    padding: 6px;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    position: relative;
    margin-bottom: 10px;

    &:hover {
      background-color: var(--background-primary-color);
    }

    &.active {
      background-color: var(--background-primary-color);

      .left-menu-icon {
        color: var(--primary-color);
      }
    }
  }

  .left-menu-icon {
    transition: all 0.3s ease-in-out;
    color: #999;

    &:hover {
      color: var(--primary-color);
    }
  }

  .divider-custom {
    margin: 8px 0;
  }
}
</style>
